<template>
  <main>
    <div class="bg"></div>
    <b-container fluid="xl" class="app">
      <div class="title">
        <h1>专用网络，沟通世界。</h1>
        <b-button pill variant="primary">下载产品书</b-button>
      </div>

      <div class="form">
        <h1>率先获取产品资讯</h1>
        <h3>即刻订阅花卷科技最新的产品资讯与优惠！</h3>

        <div class="input">
          <dt style="padding-left:10px;">邮箱</dt>
          <b-form-input :id="`type-${type}`" :type="type" placeholder="请输入您的邮箱"></b-form-input>
          <p>我同意使用上述邮箱接收花卷科技的最新产品优惠与营销邮件。</p>
          <b-button pill variant="success">加入订阅列表</b-button>
        </div>
      </div>
    </b-container>
    <div stlye="clear:both"></div>
  </main>
</template>

<script>
export default {
  name: "message"
}
</script>

<style scoped lang="scss">
main {
  width: 100%;
  margin-top: 250px;
  position: relative;
  .bg {
    height: 861px;
    width: 100%;
    z-index: -1;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
  }
  .app {
    .title {
      display: flex;
      padding-top: 210px;

      h1 {
        font-size: 68px;
        font-weight: bold;
        color: #fff;
        flex: 1;
      }

      button {
        width: 232px;
        height: 60px;
        margin-top: 15px;
        background: #3553e2;
      }
    }

    .form {
      background: #fff;
      border-radius: 10px;
      padding: 100px;
      margin-top: 200px;

      h1 {
        text-align: center;
      }

      h3 {
        text-align: center;
        margin-top: 50px;
        font-size: 20px;
      }

      .input {
        width: 70%;
        margin: 100px auto;

        dt {
          color: #888;
          font-size: 20px;
          font-weight: normal;
        }

        input {
          margin-top: 30px;
          border-left: none;
          border-right: none;
          border-top: none;
          color: #222222;
          padding-bottom: 20px;
        }

        p {
          font-size: 20px;
          color: #222;
          margin-top: 20px;
        }

        button {
          background: #4B9E65;
          width: 100%;
          line-height: 60px;
          margin-top: 35px;
        }
      }
    }
  }
}
</style>
